<template>
  <div class="goods-hot">
    <h3>{{ typeTitle[title] }}</h3>
    <div v-if="goodsList && goodsList.length > 0">
      <GoodsItem v-for="item in goodsList" :key="item.id" :goods="item"></GoodsItem>
    </div>
  </div>
</template>

<script>
import GoodsItem from '@/components/category/GoodsItem'
import API from '@/api/goods'

import { ref } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'GoodsHot',
  components: { GoodsItem },
  props: {
    title: {
      type: Number,
      default: 1
    }
  },
  setup() {
    const goodsList = ref([])

    const typeTitle = {
      1: '24小时热榜',    // typeTitle."1": string
      2: '周热销榜',      // 访问这些变量只能通过 方括号形式 typeTitle['1']
      3: '总排行榜'
    }

    const route = useRoute()
    API.getHotGoods(route.params.id, 3, 1)
      .then((res) => {
        // console.log(res.result)
        goodsList.value.push(...res.result)
      })
    return {
      typeTitle,
      goodsList
    }
  }
}
</script>

<style lang="less" scoped>
.goods-hot {

  h3 {
    height: 70px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;

    font-weight: normal;
    font-size: 18px;
    color: #fff;
    background-color: @helpColor;
  }

  :deep(.goods-item) {
    // .goods-item 是 block
    // 扩大的图片的宽高, 这个 width
    width: 100%; // height 加上了 height = 340px, 多出来的40px, 图片扩大的高度40px
    height: 100%; // height 不加上 height等于组件原来的值 300px
    margin-bottom: 10px;
    background-color: #fff;

    img {
      width: 200px;
      height: 200px;
    }

    p {
      margin: 0 10px;
    }

    &:hover {
      transform: none;
      box-shadow: none;
    }

  }
}
</style>
